<template>
  <view class="payment_wrapper">
    <view class="header_wrapper">
      <view class="image_">
        <image src=""></image>
      </view>
      <view class="text_wrapper">
        <view class="payment_success"> 支付成功 </view>
        <view class="money_wrapper"> 已支付 ￥<text>200.00</text>元 </view>
      </view>
    </view>
    <view class="footer_wrapper">
      <view class="order_">查看订单</view>
      <view class="back_">返回首页</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index.vue",
};
</script>

<style scoped lang="scss">
.payment_wrapper {
  .header_wrapper {
    margin-top: rpx(65);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    > .image_ {
      > image {
        border-radius: 50%;
        width: rpx(53.33);
        height: rpx(53.33);
        vertical-align: middle;
        background: red;
      }
    }
    > .text_wrapper {
      margin-top: rpx(18);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      > .payment_success {
        margin-bottom: rpx(8);
        font-size: rpx(17);
        font-weight: normal;
        color: #000000;
      }
      > .money_wrapper {
        font-size: rpx(14);
        font-weight: normal;
        color: #7b879b;
      }
    }
  }
  > .footer_wrapper {
    display: flex;
    justify-content: center;
    margin-top: rpx(60);
    > view {
      width: rpx(160);
      height: rpx(40);
      //background: rgba(250, 81, 81, 0.1);
      border-radius: rpx(22);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    > .order_ {
      background: rgba(250, 81, 81, 0.1);
      font-size: rpx(17);
      font-weight: 400;
      color: #fa5151;
    }
    > .back_ {
      background: #fa5151;
      font-size: rpx(17);
      font-weight: 400;
      color: #ffffff;
      margin-left: rpx(15);
    }
  }
}
</style>
